<template>
    <view :style="{ '--color': color }">
        <status-bar :title="title"></status-bar>
        <view class="userInfo">
            <view class="userBox">
                <view class="userHead">
                    <image :src="$imgUrls(storeInfo.logo)" mode="aspectFill" class="headimg"></image>
                    <view class="name ellipsis">{{ thisTeamLevel.name }}</view>
                </view>
                <view class="d-flex f-column">
                    <text class="black size30 ellipsis">{{ storeInfo.name }}</text>
                    <text class="color_99 size28 m-top10">{{ storeInfo.phone }}</text>
                </view>
            </view>
            <view class="Code" @click="showCode = true">
                <image :src="$imgUrls(pageData.qr_img)" mode="aspectFill" class="qr_img"></image>
                <text class="color_99 size24 m-top6">推广码</text>
            </view>
        </view>

        <view class="Wrapper" v-if="teamInfo.team_task_title" @click="toZone">{{ teamInfo.team_task_title }}</view>

        <view class="Datamoney">
            <view class="Datainfo j-sa m-bot30">
                <view class="list">
                    <view class="d-flex a-center" @click="toUrl(`/moneyPage/capital/withdraws`)">
                        <view class="d-flex f-column a-center">
                            <text class="dataNum">{{ pageData.income }}</text>
                            <text class="dertil">可提现(元)</text>
                        </view>
                        <!-- <view class="iconfont icon-a-zujian32 color_99 h6 m-left10"></view> -->
                    </view>
                </view>
                <view class="list" @click="toUrl(`/weiDian/promotionOrder`)">
                    <text class="dataNum">{{ pageData.wait_income }}</text>
                    <text class="dertil">待结算(元)</text>
                </view>
            </view>
            <view class="Datainfo j-sb">
                <view class="list">
                    <text class="dataNum">{{ pageData.cumulative_income }}</text>
                    <text class="dertil">累计佣金(元)</text>
                </view>
                <view class="list">
                    <text class="dataNum">{{ teamInfo.teamOrderNum }}</text>
                    <text class="dertil">累计订单(笔)</text>
                </view>
                <view class="list">
                    <text class="dataNum">{{ teamInfo.teamOrderMoney }}</text>
                    <text class="dertil">累计业绩(元)</text>
                </view>
            </view>
        </view>

        <!-- <view class="content">
            <view class="list">
                <image :src="$imgUrls(img)" mode="aspectFill" class="img"></image>
                <text class="title">商品管理</text>
            </view>
            <view class="list">
                <image :src="$imgUrls(img)" mode="aspectFill" class="img"></image>
                <text class="title">订单查看</text>
            </view>
            <view class="list">
                <image :src="$imgUrls(img)" mode="aspectFill" class="img"></image>
                <text class="title">店铺信息</text>
            </view>
        </view> -->

        <view class="content">
            <view class="list" @click="toUrl(`orderOrTeam`)">
                <view class="listIcon">
                    <view class="iconfont icon-order white size46"></view>
                </view>

                <!-- <image :src="$imgUrls(img)" mode="aspectFill" class="img"></image> -->
                <text class="title">订单查看</text>
            </view>
            <view class="list" @click="toUrl(`groupMem`)" v-if="thisTeamLevel.is_team_leader == 1">
                <view class="listIcon">
                    <view class="iconfont icon-a-022 white size46"></view>
                </view>
                <!-- <image :src="$imgUrls(img)" mode="aspectFill" class="img"></image> -->
                <text class="title">团队管理</text>
            </view>
            <view class="list" @click="toUrl(`Revenue`)">
                <view class="listIcon">
                    <view class="iconfont icon-a-031 white size46"></view>
                </view>
                <!-- <image :src="$imgUrls(img)" mode="aspectFill" class="img"></image> -->
                <text class="title">我的收益</text>
            </view>
            <view class="list" @click="toUrl(`/privatePage/single/codeCard`)">
                <view class="listIcon">
                    <view class="iconfont icon-a-032 white size46"></view>
                </view>
                <!-- <image :src="$imgUrls(img)" mode="aspectFill" class="img"></image> -->
                <text class="title">推广名片</text>
            </view>
        </view>

        <view class="Statistics">
            <view class="statiInfo">
                <text class="black size28">统计信息</text>
                <view class="Screening" @click="showType = true">
                    <text class="black size28">{{ typeName }}</text>
                    <view class="iconfont icon-paixu-xia black h6 m-left10 m-top4"></view>
                </view>
            </view>

            <view class="information">
                <view class="list">
                    <text class="infoNum">{{ sticsInfo.newShareVidCount }}</text>
                    <text class="deraion">新增粉丝(个)</text>
                </view>
                <view class="list">
                    <text class="infoNum">{{ sticsInfo.allShareVidCount }}</text>
                    <text class="deraion">累计粉丝(个)</text>
                </view>
            </view>

            <view class="information m-top50">
                <view class="list">
                    <text class="infoNum">{{ sticsInfo.newShare1OrderCount }}</text>
                    <text class="deraion">新增订单(笔)</text>
                </view>
                <view class="list">
                    <text class="infoNum">{{ sticsInfo.newShare2OrderMoney }}</text>
                    <text class="deraion">新增业绩(元)</text>
                </view>
                <view class="list">
                    <text class="infoNum">{{ sticsInfo.newIncome }}</text>
                    <text class="deraion">新增收益(元)</text>
                </view>
            </view>
        </view>

        <u-popup :show="showCode" mode="center" @close="showCode = false" round="10" closeable>
            <view class="codeShow">
                <image :src="$imgUrls(pageData.qr_img)" mode="aspectFill" show-menu-by-longpress class="Showqr_img"></image>
                <text class="black size30 m-top30">推广码</text>
            </view>
        </u-popup>

        <u-picker :show="showType" keyName="name" @confirm="confirmType" @cancel="showType = false" :columns="typeList"></u-picker>

        <u-popup :show="showTime" @close="showTime = false" closeable :round="10">
            <view class="u-popup">
                <text class="title">日期选择</text>
                <view class="TimeBox">
                    <view class="list" @click="startShow = true" :class="start_time ? 'black' : 'color_99'">{{ start_time ? start_time : '开始时间' }}</view>
                    <text class="color_99 size26 p-left24 p-right24">——</text>
                    <view class="list" @click="endShowBtn" :class="end_time ? 'black' : 'color_99'">{{ end_time ? end_time : '结束时间' }}</view>
                </view>
                <view class="fotBtn" @click="Customize">确定</view>
            </view>
        </u-popup>
        <u-datetime-picker :show="startShow" @cancel="startShow = false" @confirm="confirmStart" v-model="value1" mode="date" :maxDate="maxDate"></u-datetime-picker>
        <u-datetime-picker :show="endShow" @cancel="endShow = false" @confirm="confirmEnd" v-model="value2" mode="date" :maxDate="maxDate" :minDate="value1"></u-datetime-picker>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                title: '推客中心',
                pageData: '',
                storeInfo: '',
                thisTeamLevel: '',
                upLevelInfo: '',
                teamInfo: '',
                showCode: false,
                showType: false,
                showTime: false, // 自定义时间
                startShow: false,
                endShow: false,
                type: 1,
                start_time: '',
                end_time: '',
                value1: Number(new Date()),
                value2: Number(new Date()),
                maxDate: Number(new Date()),
                sticsInfo: '', // 统计信息
                img: 'http://sraimgcdn2.mogoie.com//Uploads/img2019/7465/6064/20250568345164b4847.jpg'
            };
        },
        onLoad() {
            this.index();
            this.statisticsInfo();
        },
        methods: {
            index() {
                this.$http
                    .post({
                        url: '/weChatStoreApi/index'
                    })
                    .then((res) => {
                        if (res.errcode != '100') return this.$Toast(res.msg);
                        const result = res.data;
                        this.pageData = result;
                        this.storeInfo = result.storeInfo;
                        this.teamInfo = result.teamInfo;
                        this.thisTeamLevel = result.thisTeamLevel;
                        this.upLevelInfo = result.upLevelInfo;
                    });
            },

            statisticsInfo() {
                this.$http
                    .post({
                        url: '/weChatStoreApi/statisticsInfo',
                        data: {
                            type: this.type,
                            start_time: this.start_time,
                            end_time: this.end_time
                        }
                    })
                    .then((res) => {
                        if (res.errcode != '100') return this.$Toast(res.msg);
                        const result = res.data;
                        this.sticsInfo = result;
                    });
            },

            confirmType(item) {
                const type = item.value[0].type;
                this.showType = false;
                if (type == 7) return (this.showTime = true);
                this.type = type;
                this.start_time = '';
                this.end_time = '';
                this.statisticsInfo();
            },
            endShowBtn() {
                if (!this.start_time) return this.$Toast('请先选择开始时间');
                this.endShow = true;
            },
            confirmStart(e) {
                this.value1 = e.value;
                this.formatDate(e.value, 1);
            },
            confirmEnd(e) {
                this.value2 = e.value;
                this.formatDate(e.value, 2);
            },
            Customize() {
                if (!this.start_time || !this.end_time) return this.$Toast('请选择时间');
                this.type = 7;
                this.showTime = false;
                this.statisticsInfo();
            },
            formatDate(timestamp, num) {
                let date = new Date(timestamp);
                let year = date.getFullYear();
                let month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
                let day = String(date.getDate()).padStart(2, '0');
                const Time = `${year}-${month}-${day}`;
                num == 1 ? (this.start_time = Time) : (this.end_time = Time);
                this.startShow = false;
                this.endShow = false;
            },
            toZone() {
                if (!this.teamInfo.team_task_route) return;
                this.toUrl(`${this.teamInfo.team_task_route}`);
            }
        },
        computed: {
            ...mapState(['color']),
            typeList() {
                return [
                    [
                        {
                            type: 1,
                            name: '今天'
                        },
                        {
                            type: 2,
                            name: '昨天'
                        },
                        {
                            type: 3,
                            name: '本周'
                        },
                        {
                            type: 4,
                            name: '上周'
                        },
                        {
                            type: 5,
                            name: '本月'
                        },
                        {
                            type: 6,
                            name: '上月'
                        },
                        {
                            type: 7,
                            name: '自定义'
                        }
                    ]
                ];
            },

            typeName() {
                if (!this.typeList.length) return;
                const Item = this.typeList[0].find((n) => n.type == this.type);
                return Item ? Item.name : '';
            }
        }
    };
</script>

<style lang="scss">
    page {
        background-color: $page;
    }
</style>
<style lang="scss" scoped>
    .u-popup {
        width: 100%;
        padding: 24rpx 24rpx 50rpx 24rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .title {
            color: #000;
            font-size: 32rpx;
        }
        .TimeBox {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 40rpx;
            .list {
                width: 270rpx;
                height: 80rpx;
                padding: 10rpx;
                font-size: 28rpx;
                border: 1px solid #f1f1f1;
                border-radius: 10rpx;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        .fotBtn {
            width: 280rpx;
            height: 80rpx;
            background-color: var(--color);
            color: #fff;
            font-size: 32rpx;
            margin-top: 50rpx;
            border-radius: 10rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .userInfo {
        width: 710rpx;
        margin: 24rpx auto 0;
        background-color: #fff;
        padding: 24rpx;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        .userBox {
            flex: 1;
            display: flex;
            align-items: center;
            .userHead {
                width: 100rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                position: relative;
                margin-right: 20rpx;
                .headimg {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 50%;
                }
                .name {
                    background-color: var(--color);
                    color: #fff;
                    font-size: 20rpx;
                    width: 88rpx;
                    height: 40rpx;
                    text-align: center;
                    line-height: 40rpx;
                    border-radius: 20rpx;
                    margin-top: -30rpx;
                    position: relative;
                    z-index: 10;
                }
            }
        }

        .Code {
            display: flex;
            flex-direction: column;
            align-items: center;
            .qr_img {
                width: 70rpx;
                height: 70rpx;
            }
        }
    }

    .Wrapper {
        width: 710rpx;
        margin: 24rpx auto 0;
        background-color: #fff;
        padding: 20rpx;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333;
        font-size: 28rpx;
    }
    .Datamoney {
        width: 710rpx;
        margin: 24rpx auto 0;
        background-color: #fff;
        padding: 30rpx 24rpx;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        .Datainfo {
            width: 100%;
            display: flex;

            .list {
                display: flex;
                flex-direction: column;
                align-items: center;
                .dataNum {
                    color: #000;
                    font-size: 30rpx;
                }
                .dertil {
                    color: #999;
                    font-size: 26rpx;
                    margin-top: 10rpx;
                }
            }
        }
    }

    .content {
        width: 710rpx;
        margin: 24rpx auto 0;
        background-color: #fff;
        padding: 30rpx;
        border-radius: 10rpx;
        display: flex;
        justify-content: space-between;
        .list {
            display: flex;
            flex-direction: column;
            align-items: center;
            .listIcon {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                background-color: var(--color);
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .img {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
            }
            .title {
                color: #333;
                font-size: 28rpx;
                margin-top: 10rpx;
            }
        }
    }

    .Statistics {
        width: 710rpx;
        margin: 24rpx auto 0;
        background-color: #fff;
        padding-bottom: 30rpx;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        .statiInfo {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-left: 24rpx;
            .Screening {
                display: flex;
                align-items: center;
                padding: 30rpx;
            }
        }
        .information {
            width: 100%;
            display: flex;
            justify-content: space-around;

            .list {
                display: flex;
                flex-direction: column;
                align-items: center;

                .infoNum {
                    color: #000;
                    font-size: 30rpx;
                }
                .deraion {
                    color: #999;
                    font-size: 26rpx;
                }
            }
        }
    }

    .codeShow {
        width: 600rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 40rpx 24rpx;

        .Showqr_img {
            width: 260rpx;
            height: 260rpx;
        }
    }
</style>
